<template>
  <div class="prod-list">
	  <el-dialog
	    :visible.sync="dialogVisible"
	    width="1000px"
	    :before-close="handleClose">
	    <prod-detail :prodId="prodId" @handleClose="handleClose"></prod-detail>
	  </el-dialog>
    <el-card class="box-card">
      <h2>{{$t("vr.searchResults")}}</h2>
      <el-form :inline="true" class="demo-form-inline" :model="form">
        <el-form-item class="search-input">
          <el-input v-model="form.search"></el-input>
        </el-form-item>
        <el-form-item class="search-btn">
          <el-button :disabled="!form.search" @click="onSubmit" size="medium">{{$t("vr.search")}}</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="80">
        <el-col :span="12" v-for="(v,i) in dataList" :key="i" style="margin-bottom: 20px;">
          <div class="prod-list-item">
            <img :src="v.picture" alt="" @click="goDetail(v.anchor)">
            <div>{{v.title}}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
	
  </div>
</template>

<script>
  import api from "servicePath/index";
  import prodDetail from '../../common/prodDetail'
  import { mapState, mapMutations } from "vuex";
export default {
 components: {
    prodDetail
  },	
  data () {
    return {
      form:{
        search: ''
      },
      dataList:[],
	  dialogVisible: false,
	  prodId:'',
    }
  },
  computed: {
    ...mapState(["lang"])

  },
  created () {

  },
  methods: {
    ...mapMutations(['isShowLogin']),
	handleClose () {
	  this.dialogVisible = false
	  this.prodId = ''
	},
    goDetail (anchor) {
      if (this.$store.state.userInfo !== '') {
		    this.dialogVisible = true;
			this.prodId = anchor;
        //  this.$router.replace(`/foundation/pc/home?prodId=${anchor}`)
      } else {
          this.isShowLogin('show');
      }
        
    },
    async onSubmit () {
      const loading = this.$loading();
      let res = await api.getProductSearch(this.form.search,this.lang);
      this.dataList = res.data;
      loading.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.prod-list {
  width: 1200px;
  margin: 30px auto;
  .box-card {
    /deep/.el-card__body {
      padding: 40px 80px 60px;
      h2 {
        font-size: 38px;
        line-height: 50px;
        color: #1B1B4E;
        margin-bottom: 50px;
      }
      .prod-list-item {
        img {
          display: block;
          width: 100%;
          height: 300px;
          margin-bottom: 20px;
        }
        p {
          font-size: 18px;
          margin: 20px 0 12px;
          color: #101010;
        }
        div {
          color: #707070;
          line-height: 22px;
          font-style: 16px;
        }
      }
    }
  }
}

.search-input{
  width: 505px;
  height: 52px;
  background: #FFFFFF;
  box-shadow: 0px 5px 15px rgba(27, 27, 78, 0.1);
  opacity: 1;
  border-radius: 10px;
}
.search-input /deep/ .el-form-item__content, .search-input /deep/ .el-input, .search-input /deep/ .el-input__inner{
  width:100%;
  display: block;
  height: 100%;
  outline: none;
  border:none;
  font-size: 20px;
}

.search-btn{
  width: 117px;
height: 52px;
background: #FB4F50;
box-shadow: 0px 5px 15px rgba(251, 79, 80, 0.3);
opacity: 1;
border-radius: 10px;
}

.search-btn /deep/ .el-form-item__content{
  width:100%;
  height: 100%;
}

.search-btn /deep/ .el-button{
  width:100%;
  height: 100%;
  border:none;
  background-image: linear-gradient(to right, #ff7f41, #e6007e);
  color:#fff;
}

</style>

